import { Component } from "react"
class App extends Component {
  /**
   * 受控组件，value值收到react状态控制的表单元素
   * 
   * 
   */
  state = {
    val: 'hello'
  }
  handleChange = (e) => {
    // 拿到输入的最新值， 
    console.log(e.target.value)
    // 用拿到的最新的值覆盖老值
    this.setState({
      val: e.target.value
    })
  }
  render () {
    return (
      <div>
        <h1>受控组件</h1>
        <hr />
        <p><input type="text" value={this.state.val} onChange={this.handleChange} /></p>
        {/* 一旦 value={this.state.val} 输入框就受react的state的控制*/}
      </div>
    )
  }
}
export default App